<template>
  <a-tree-select
    style="width: 100%"
    allowClear
    v-model="stateValue"
    treeNodeFilterProp="title"
    :treeData="treeData"
    :treeCheckable="multiple"
    :multiple="multiple"
    :placeholder="placeholder"
    @change="onChange"
  />
</template>

<script>
  import { mapActions, mapState } from 'vuex'

  export default {
    name: 'SelectTenant',
    props: {
      multiple: {
        type: Boolean,
        default: false,
      },
      value: {
        type: [Number, Array],
        default: undefined,
      },
      placeholder: {
        type: String,
        default: '请选择租户',
      },
    },
    data() {
      return {
        stateValue: this.value,
      }
    },
    watch: {
      value(val) {
        this.stateValue = val
      },
    },
    created() {
      this.treeData.length === 0 && this.onList()
    },
    mounted() {},
    computed: {
      ...mapState({
        loading: state => state.SysTenant.loading,
        treeData: state => {
          return (
            (state.SysTenant.listData &&
              state.SysTenant.listData.map(item => {
                return {
                  title: item.tenantName,
                  value: item.id,
                  key: item.id,
                }
              })) ||
            []
          )
        },
      }),
    },
    methods: {
      ...mapActions({
        onList: 'SysTenant/onList',
      }),
      onChange(value) {
        this.$emit('change', value)
        this.$emit('input', value)
      },
    },
  }
</script>

<style scoped lang="less"></style>
